<template>
  <li class="el-timeline-item">
    <div
      v-if="!isLast"
      :class="['el-timeline-item-line', lineColorAndPendingStyle]"
      style="margin-top: 13%"
    ></div>

    <!-- el-timeline-item__node -->
    <div
      v-if="!$slots.dot"
      class="el-node"
      :class="[
        `el-timeline-item__node--${size || ''}`,
        `el-timeline-item__node--${type || ''}`,
      ]"
      :style="{
        backgroundColor: '#fff',
        border: `3px solid ${customizeColor}`,
        marginTop: '13%',
        left: '-4px',
      }"
    >
      <i v-if="icon" class="el-timeline-item__icon" :class="icon"></i>
    </div>
    <div v-if="$slots.dot" class="el-timeline-item__dot">
      <slot name="dot"></slot>
    </div>

    <div class="el-timeline-item__wrapper">
      <div
        v-if="!hideTimestamp && placement === 'top'"
        class="el-timeline-item__timestamp is-top"
      >
        {{ timestamp }}
      </div>

      <div class="el-timeline-item__content">
        <slot></slot>
      </div>

      <div
        v-if="!hideTimestamp && placement === 'bottom'"
        class="el-timeline-item__timestamp is-bottom"
      >
        {{ timestamp }}
      </div>
    </div>
  </li>
</template>

<script>
export default {
  name: "ElTimelineItem",

  data() {
    return {
      colors: {
        continue: "#6190E8",
        success: "#25a525",
        fail: "#e92424",
      },
      isLast: false,
      isLastTwo: false,
    };
  },

  inject: ["timeline"],

  props: {
    timestamp: String,

    hideTimestamp: {
      type: Boolean,
      default: false,
    },

    placement: {
      type: String,
      default: "bottom",
    },

    type: String,

    size: {
      type: String,
      default: "normal",
    },

    status: {
      type: String,
      default: "continue",
    },

    icon: String,
  },

  computed: {
    customizeColor() {
      return this.colors[this.status];
    },
    lineColorAndPendingStyle() {
      if (this.status === "success") {
        return "el-timeline-item__tail__success";
      } else {
        if (this.isLastTwo) {
          return `el-line-pending__${this.status}`;
        } else {
          return `el-timeline-item__tail__${this.status}`;
        }
      }
    },
  },

  updated() {
    this.checkForIndex();
  },

  methods: {
    checkForIndex() {
      let children = this.$parent.$children;
      this.isLast = children.indexOf(this) === children.length - 1;
      this.isLastTwo = children.indexOf(this) === children.length - 2;
    },
  },

  mounted() {
    this.checkForIndex();
  },
};
</script>
<style scoped>
.el-timeline-item-line {
  position: absolute;
  left: 4px;
  height: 100%;
}

.el-timeline-item__tail__continue {
  border-left: 3px solid #6190e8;
}
.el-timeline-item__tail__fail {
  border-left: 3px solid #e92424;
}
.el-timeline-item__tail__success {
  border-left: 3px solid #25a525;
}
/* 继续-最后节点虚拟节点 */
.el-line-pending__continue {
  border-left: 3px dashed #6190e8;
}
/* 失败-最后节点虚拟节点 */
.el-line-pending__fail {
  border-left: 3px dashed #e92424;
}
.el-node {
  position: absolute;
  background-color: #e4e7ed;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
